<template>
  <div class="app-container">
    <div class="mainbox" v-loading="pageLoading">
      <el-form ref="formRef" :model="formData" :inline="true" label-position="top">
        <template v-for="item in formDesignList">
          <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
<!--            <el-image-->
<!--              v-show="item.prop === 'showImg'"-->
<!--              style="width: 100px; height: 100px"-->
<!--              :src="formData[item.prop]"-->
<!--              :preview-src-list="[formData[item.prop]]">-->
<!--            </el-image>-->
<!--            <video v-show="item.prop === 'showVideo'" ref="video" style="width: 100%; height: 100px;" controls muted preload loop :src="formData[item.prop]"></video>-->
            <FormTemplate :form-item="item" v-model="formData[item.prop]"/>
          </el-form-item>
        </template>
      </el-form>
      <el-button style="width: 120px;margin: auto;" type="primary" @click="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import FormTemplate from "@/views/investment/components/FormTemplate";
import unifiedReportingApi from '@/api/investment/unifiedReporting'
export default {
  name: "CitySituation",
  components: { FormTemplate },
  data() {
    const _this = this
    return {
      pageLoading: false,
      formData: {
        conditionsArea: '',
        population: '',
        conditionsGdp: '',
        description: '',
        conditionsHistory: '',
        conditionsDevelop: '',
        overview: '',
        showImg: '',
        showVideo: ''
      },
      formDesignList: [
        { type: 'number', prop: 'conditionsArea', label: `区域辖区面积(平方公里)`, rules: [{ required: true, message: '请输入区域辖区面积', trigger: 'blur' }] },
        { type: 'number', prop: 'population', label: `常住人口(人)`, rules: [{ required: true, message: '请输入常住人口', trigger: 'blur' }] },
        { type: 'number', prop: 'conditionsGdp', label: `上年度全区生产总值(亿元)`, rules: [{ required: true, message: '请输入上年度全区生产总值', trigger: 'blur' }] },
        { type: 'textarea', prop: 'description', label: `辖区描述`, maxlength: 1000, autosize: {minRows: 13, maxRows: 13}, rules: [{ required: true, message: '请输入辖区描述', trigger: 'blur' }] },
        { type: 'textarea', prop: 'conditionsHistory', label: `自然历史`, maxlength: 1000, autosize: {minRows: 13, maxRows: 13}, rules: [{ required: true, message: '请输入自然历史', trigger: 'blur' }] },
        { type: 'textarea', prop: 'conditionsDevelop', label: `产业发展方向`, maxlength: 1000, autosize: {minRows: 13, maxRows: 13}, rules: [{ required: true, message: '请输入产业发展方向', trigger: 'blur' }] },
        { type: 'textarea', prop: 'overview', label: `丛台概况`, maxlength: 1000, autosize: {minRows: 17, maxRows: 17}, rules: [{ required: true, message: '请输入丛台概况', trigger: 'blur' }] },
        { type: 'file', prop: 'showImg', label: `门户展示图`, fileSize: 5, fileTypes: ['png', 'jpg', 'jpeg'], rules: [{ message: '请上传门户展示图', trigger: 'change' }], callBack: (info) => {
            _this.$set(_this.formData, 'showImg', info.fileUrl)
          } },
        { type: 'file', prop: 'showVideo', label: `视频推广`, fileSize: 300, fileTypes: ["mp4", "avi", "mpeg"], rules: [{ message: '请上传视频推广', trigger: 'change' }], callBack: (info) => {
            _this.$set(_this.formData, 'showVideo', info.fileUrl)
          } },
      ]
    }
  },
  created() {
    this.getInitData()
  },
  methods: {
    getInitData(){
      this.pageLoading = true
      unifiedReportingApi.getCitySituationInfo().then(res => {
        this.formData = res.data
        this.pageLoading = false
      }).catch(event => {
        this.pageLoading = false
      })
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.pageLoading = true
          unifiedReportingApi.setCitySituationInfo(this.formData)
            .then((res) => {
              if (res.code == '00000') {
                this.pageLoading = false
                this.$message.success(`保存成功`)
              }
            })
            .catch(res => {
              this.pageLoading = false
              this.$message.error(`保存失败`)
            })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.el-form--inline ::v-deep .el-form-item{
  width: calc((100% - 14px * 2) / 3);
  &:nth-child(3n){
    margin-right: 0;
  }
}
</style>
